<template>
	<div class="main-div">
		<div class="header-div">
			<b>{{ titleEdit }}</b>
		</div>
       <el-form 
	   		:model="form" 
	   		label-width="150px"
			class="form-demo" >
         <el-form-item>
			<template #label>
				<span class="custom-label">试卷名称：</span>
			</template>
            <el-input v-model="form.testPaperName"></el-input>
         </el-form-item>
         <el-form-item>
			<template #label>
				<span class="custom-label">试卷分类：</span>
			</template>
            <el-input v-model="form.classification"></el-input>
         </el-form-item>
         <el-form-item >
			<template #label>
				<span class="custom-label">试卷状态：</span>
			</template>
            <el-switch
                v-model="form.state"
                :active-value="'启用'"
                :inactive-value="'禁用'"
                active-color="#64bd63"
                inactive-color="#c0c0c0" 
                @change="changeSwitch(form.state)"/>
         </el-form-item>
         <el-form-item >
			<template #label>
				<span class="custom-label">试卷总分：</span>
			</template>
            <el-input v-model="form.totalScore" placeholder="无需填写,系统将自动计算,将自动计算" disabled=""></el-input>
         </el-form-item>
         <el-form-item >
			<template #label>
				<span class="custom-label">试题设置：</span>
			</template>
		 <el-row style="width: 100%;">
			<el-button @click="addTest">
			<i class="iconfont icon-jia" ></i>添加试题</el-button>
		 </el-row>
          <!-- <el-row style="width: 100%;"> -->
			<el-scrollbar  height="400px" style="width: 50%;">	
				<el-card class="box-card" 
					body-style=" padding: 0px 0px; "
					v-for="item in count" :key="item">
					<template #header>
					<div class="card-header">
						<label class="label-test white ml10">大题名称:</label>
						<el-input  placeholder="" ></el-input>
						<div class="card-div1">
							<el-button  color="#C2C2C2" @click="openTest"><i class="iconfont icon-jia"></i>增加试题</el-button>
							<el-icon class="s1"><CaretBottom /></el-icon>
							<el-icon class="s1" @click="onDelete"><CloseBold /></el-icon>
						</div>
					</div>
					<div class="card-header1">
						<label class="label-test color8 ml10">大题描述:</label>
						<el-input  ></el-input>
						<div  class="div-btn" style="float: right; margin-right: 10px; margin-top: 5px;">
						<el-input  v-model="scoreSet" placeholder="分值" style="width: 50px; background-color: #A5DC86;"></el-input>
						<el-button  color="#23c6c8" style="color: #fff;" @click="batchSettings">批量设置</el-button> 
					</div>
					</div>
					</template>
					<!-- <p v-for="item in count" :key="item" class="scrollbar-demo-item">{{ item }}</p> -->
					<!-- <el-scrollbar > -->
					<div class="scrollbar-demo-item" v-for="item in form.checkedData" :key="item">
						<el-input-number
							v-model="item.score"
							:min="1"
							controls-position="right"
							@change="handleChangeScore"
						/>
						<el-input v-model="item.question_stem" disabled></el-input>
						<el-button-group>
							<el-button color="#23c6c8" class="white" @click="lookTestDetail(item)">详情</el-button>
							<el-button color="#ED5565"  class="white" @click="deleteTest(item)">删除</el-button>
					    </el-button-group>
					</div>
					<!-- </el-scrollbar> -->
				</el-card>
				
  			</el-scrollbar>
	<!-- </el-row> -->
         </el-form-item>
		 <el-form-item>
			<el-button color="#1C84C6" @click="onSubmit">提交</el-button>
			<el-button @click="rollback" v-if="other=='other'">返回</el-button>
			<el-button @click="reSet" v-else>重新填写</el-button>
			</el-form-item>
       	</el-form>
		
    </div>

     <el-dialog title="选择题库" v-model="testVisible" width="650">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">选择题库</h4> 
			</div>
			</template>
		<TestK v-model:checked-data="form.checkedData"></TestK>
	 </el-dialog>
      <!-- 试题预览的弹框 -->
		<el-dialog title="试题预览" v-model="previewDialogVisible" width="650">
			<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">试题预览</h4> 
			</div>
			</template>
			<TestSub v-model:showData="showData"></TestSub>
		<el-divider></el-divider>
		</el-dialog>

		<!-- </div> -->
	<!-- </div> -->
</template>

<script setup >
import { ref, reactive ,toRefs,onMounted,watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import TestK from './TestK.vue';
import TestSub from '../testSubVue/TestSub.vue'
// 表单数据
// const editVisible = ref(false);
let form = reactive({
    id:'',
	testPaperName: '',//试卷名称
    classification:'',//试卷分类
    state:'禁用',//试卷状态
	totalScore:'',//试卷总
	checkedData:[
		// {
		// 	score:'5',
		// 	question_stem:''
		// }
	]
});

console.log(form.checkedData,'<<<<checkedDATAs')

/********查看试题详情的弹窗********** */
const  previewDialogVisible = ref(false)
const showData = reactive({
	question_bank: '',
    type: '',
    status: '',
    label: [],
    difficulty: '',
    question_stem: '',
    founder: '',
    modified_by: '',
    creation_time: '',
    change_modified: '',
    option_settings: '',
    source_test: '',
	score:'',
    test_answer: '',
    answer_analysis: ''
})
const   lookTestDetail=(item)=>{
	showData.question_bank= item.question_bank
    showData.question_stem= item.question_stem
	showData.type= item.type
	showData.status= item.status
	showData.label=item.label
	showData.difficulty=item.difficulty
	showData.founder=item.founder
	showData.modified_by=item.modified_by
	showData.option_settings=item.option_settings
	showData.score=item.score
	showData.test_answer=item.test_answer
	showData.answer_analysis=item.answer_analysis
	previewDialogVisible.value=true
}
/**---------删除按钮--------------- */
const deleteTest=(item)=>{
	let index = form.checkedData.indexOf(item)
	if(index>-1){
		form.checkedData.splice(index,1)
	}
	
}
/***批量设置分值 */
const scoreSet  = ref()
const batchSettings=()=>{
	form.checkedData.map(item=>{
		item.score=scoreSet.value
		return item
	})
}

/****------------ 添加试题 ------------*** */
const count = ref(1)

const addTest = () => {
  count.value++
}
const onDelete = () => {
  if (count.value > 0) {
    count.value--
  }
}
/**------card中的添加试题 点击之后弹出所有题目的框 选择题目题目后自动添加到试题中---------***/
const  testVisible = ref(false)
const  openTest=()=>{
	testVisible.value=true
}

/****  单个分数修改***** */
const  handleChangeScore=()=>{

}

// 头部标题
let titleEdit = ref('创建试卷')

const props = defineProps({
	rowData:Object,
	other:String,
})
const {rowData,other} = toRefs(props)
// console.log(rowData?.value,'<<<<<row')
const emit = defineEmits(['upadate:rowData','change'])
watch([rowData],(old,newX)=>{
	console.log('old',old,'newValue',newX,'11')
		form.classification = ''
		form.id = ''
		form.state='禁用'
		form.testPaperName= ''
		form.totalScore= ''
		titleEdit.value='创建试卷'
})
onMounted(()=>{
	console.log(rowData?.value,'onMouted')
	if(rowData?.value){
		form.testPaperName = rowData.value.testPaperName
		form.id = rowData.value.id
		form.state = rowData.value.state
		form.totalScore= rowData.value.totalScore
		form.classification= rowData.value.classification
		titleEdit.value='修改试卷'
		// console.log(form.id,'rrrr')
	}else{
		titleEdit.value='创建试卷'
		console.log(rowData,form,'rf')
	}
})


//是够启用调用后台接口
const  changeSwitch=(status)=>{
    //1 调用后台修改接口
    console.log(status,'>>>status');
	//2 重新查询数据
}

//保存添加或者修改的数据 ---需要重新实现
const onSubmit = () => {
	
	//
};
//重置 
function reSet(){
	form.testPaperName=''
	form.classification=''
}
//返回 
const rollback = ()=>{
  emit('change',true)
}
</script >
<style lang="less" scoped>
.el-form .el-input {
	width: 50%;
	
}
.el-form .el-textarea {
	width: 50%;
	
}
.custom-label{
	font-size: 14px;
  	font-weight: 900;
  	color: #666;
}
.header-div{
	background-color: #F5F5F5;
	color: #666666;
	margin: 0px 0px 10px;
	padding: 10px 10px; 
	font-size: 14px;
}
.main-div{
	border: 1px solid #f0f0f0;
    padding: 0px,15px,15px,15px;
}


.card-header1 {
  background-color: #f5f5f5;
  padding: 5px 10px;
}
.card-header {
//   display: flex;
//   justify-content: space-between;
  align-items: center;
  background-color: #0a6aa1;
  padding: 5px 10px;
}
.card-div1{
  float: right;
  .el-button{
	height: 25px;
	width: 75px;
	font-size:12px;
	padding: 3px 5px;
	margin-right: 5px;
	color:#ffffff;
  }
}
.s1{
	margin-right: 8px; 
	color:#ffffff;
}
.ml10{
	margin-left: 10px;
}
// 修改卡片头的样式
.el-card ::v-deep .el-card__header {
  padding: 0px 0px;
//   background-color:#c2c2c2;
}
// 修改卡片的样式
.box-card {
  width: 100%;//
  margin: 5px 0px 15px;

}
.label-test{
	display: inline-block;
	font-weight: 700;
	margin-top:5px ;
	max-width: 100%;
	margin-right: 20px;
}
.color8{
	color: #888888;
}
.white{
	color:#fff;
}

 .div-btn .el-input /deep/.el-input__inner {
  background-color: #A5DE86;
}
 .div-btn .el-input /deep/.el-input__wrapper {
  background-color: #A5DC86;
}
//  .scrollbar-demo-item .el-input /deep/.el-input__inner {
//   background-color: #EEEEEE;
// }
//  .scrollbar-demo-item .el-input /deep/.el-input__wrapper {
//   background-color: #EEEEEE;
// }

/**添加试题滚动条样式 */
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
//   margin: 10px;
  text-align: center;
//   border-radius: 4px;
//   background: var(--el-color-primary-light-9);
//   color: var(--el-color-primary);
    line-height: 40px;
}

 .scrollbar-demo-item .el-input-number /deep/.el-input__inner {
  background-color: #FFFFCC;
}
 .scrollbar-demo-item .el-input-number /deep/.el-input__wrapper {
  background-color: #FFFFCC;
}


.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px  solid #f0f0f0;
}
</style>